window.onload = function() {
    canvas = document.getElementById("canvas");
    canvas.onselectstart = function() { return false; };
    ctx = canvas.getContext("2d");
    offsetX = canvas.offsetLeft;
    offsetY = canvas.offsetTop;
    canvas.onmousedown = onMouseDown;
    canvas.onmousemove = onMouseMove;
    createTable();
};

function setTrue() {
	turn = true;
}

function setFalse() {
	turn = false;
}

function toggleTurn() {
	if(turn == true)
		turn = false;
	else turn = true;
}

function getTurn() {
	return turn;
}

function getMouseX() {
	return mouseX;
}

function createTable(){
	var x = 385;
	var y = 385;
	var p = 55;
	var base = x + 1;
	var height = y + (p*2) + 1;

	for (var i = 0; i <= base; i += 55) {
	    ctx.moveTo(0.5 + i + p, p);
	    ctx.lineTo(0.5 + i + p, height + p);
	}
	
	for (var j = 0; j <= height; j += 55) {
	    ctx.moveTo(p, 0.5 + j + p);
	    ctx.lineTo(base + p, 0.5 + j + p);
	}
	
	ctx.stroke();
	ctx.fill();
}

  
var pucks = []; // array with all shapes
var puck = null; // used in for loops
var color;  //color of puck, red or yellow

var vertX; // stores the X vertex from a shape being resized
var vertY; // the same of the above for Y vertex

var canvas; // canvas reference
var ctx; // context reference
var turn; //the users turn during the game

var canvasOffset; // canvas offset
var offsetX; // offset of the canvas in X
var offsetY; // offset of the canvas in Y

// mouse down position - mouse click position
var startX;
var startY;

// mouse "after mouse down" position - pressing button
var mouseX;
var mouseY;

// represents the turn and lets the player choose a position
var turn = false;

//class of pucks
function Puck(startX, startY, radius, color) { 
    this.centerX = startX;
    this.centerY = startY;
    this.radius = radius;
    this.color = color;
   	 
    this.draw = function(){
	    ctx.beginPath();
        ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = this.color;
     
	    ctx.fill();
        ctx.stroke();
    };
}

Puck.prototype = new Puck();
Puck.prototype.constructor = Puck;

function onMouseDown(e){
	if(turn == true) {
		//improves mouse postion over puck
		mouseX = parseInt(e.clientX - offsetX);
	    mouseY = parseInt(e.clientY - offsetY);
		var color="yellow";
		var x = startX;	
		var y = 357;
		
		for(var i = 0; i < pucks.length; i++) {
			if(x == pucks[i].centerX) {
				y = Math.min(y,pucks[i].centerY) - 55;
			}
		}
	    
	    /*for(var startY=27; startY<=467; startY+=55){
	    	ctx.beginPath();
	    	ctx.arc(x, startY, 20, 0, 2 * Math.PI);
	    	ctx.stroke();
	    	ctx.fill();
	    	ctx.closePath();
	    }*/
		
		//if y is outside the table pucks, are not created
	    if(y >= 82) {
	    	puck = new Puck(x, y, 20, color);
	        //added new object puck in the array of pucks
	    	pucks.push(puck);	
	    }
	    
	    turn = false;
	}
	
    drawPucks();
}

function onMouseMove(e){
	if(turn == true) {
		mouseX = parseInt(e.clientX - offsetX);
	    mouseY = parseInt(e.clientY - offsetY);
	    
	    //inicial position of puck
	    startY=27;
	    
	    //drawing puck inside table
	    drawPucks();
	    ctx.beginPath();
	    
	    if(mouseX >= 55 && mouseX <= 110) {
	    	startX = (55 + 110) / 2;
	    } else if(mouseX > 110 && mouseX <= 165) {
	    	startX = (110 + 165) / 2;
	    } else if(mouseX > 165 && mouseX <= 220) {
	    	startX = (165 + 220) / 2;
	    } else if(mouseX > 220 && mouseX <= 275) {
	    	startX = (220 + 275) / 2;
	    } else if(mouseX > 275 && mouseX <= 330) {
	    	startX = (275 + 330) / 2;
	    } else if(mouseX > 330 && mouseX <= 385) {
	    	startX = (330 + 385) / 2;
	    } else if(mouseX > 385 && mouseX <= 440) {
	    	startX = (385 + 440) / 2;
	    } 
	    
	    ctx.arc(startX, startY, 20, 0, 2 * Math.PI);
	    ctx.stroke();
	}
}

//clear the canvas and the array of shapes
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pucks = [];
}

// draw all the shapes
function drawPucks() {
    // Clear the canvas.
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    createTable();
    
    // Go through all the shapes.
    for(var i = 0; i < pucks.length; i++) {
        var puck = pucks[i];
        puck.draw();
    }
}